<template>
  <div class="app-container">
    <div style="padding: 0 20px 20px;"><el-button type="primary"
                 size="small"
                 @click="add"
                 icon="el-icon-plus"
                 circle></el-button></div>
    <el-table :max-height="initHeightFun()"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="menuId"
              border
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="index"
                       width="50"
                       align="center"></el-table-column>
      <el-table-column label="菜单名称"
                       width="180">
        <template slot-scope="scope">
          {{ scope.row.menuName }}
        </template>
      </el-table-column>
      <el-table-column label="菜单图标"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.icon }}
        </template>
      </el-table-column>
      <el-table-column label="路由地址"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.path }}
        </template>
      </el-table-column>
      <el-table-column label="路由参数"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.query }}
        </template>
      </el-table-column>
      <el-table-column label="组件路径"
                       align="center" width="300">
        <template slot-scope="scope">
          {{ scope.row.component }}
        </template>
      </el-table-column>
      <el-table-column label="菜单类型"
                       align="center">
        <template slot-scope="scope">
          {{ menuTypeArr[scope.row.menuType=='M'?0:(scope.row.menuType=='C'?1:2)].label }}
        </template>
      </el-table-column>
      <el-table-column label="菜单标识"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.perms }}
        </template>
      </el-table-column>
      <el-table-column label="菜单状态"
                       align="center">
        <template slot-scope="scope">
          {{ statusArr[scope.row.status].label }}
        </template>
      </el-table-column>
      <el-table-column label="是否显示"
                       align="center">
        <template slot-scope="scope">
          {{ visibleArr[scope.row.visible].label }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       fixed="right"
                       width="200">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="small"
                     @click="edit(scope.row)"
                     icon="el-icon-edit"
                     circle></el-button>
          <el-button type="warning"
                     size="small"
                     @click="viewHeld(scope.row)"
                     icon="el-icon-view"
                     circle></el-button>
          <el-button type="danger"
                     size="small"
                     @click="del(scope.row)"
                     icon="el-icon-delete"
                     circle></el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="newedit == 0 ? '新增菜单' :(newedit == 1 ? '编辑菜单' : '查看详情')"
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               ref="from"
               :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称:">
              <el-input v-model="form.menuName"
                        clearable
                        autocomplete="off"
                        :disabled="newedit==2?true:false"
                        placeholder="请输入菜单名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标:">
              <el-input v-model="form.icon"
                        clearable
                        autocomplete="off"
                        :disabled="newedit==2?true:false"
                        placeholder="请输入图标名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级菜单:">
              <!-- <el-select v-model="form.parentId" clearable :disabled="newedit==2?true:false" placeholder="选择上级菜单" style="width: 100%;">
                <template v-for="(item, index) in fullData">
                  <el-option :label="item.menuName" :value="item.menuId"></el-option>
                </template>
              </el-select> -->
              <treeselect v-model="form.parentId"
                          placeholder="选择上级菜单"
                          :single="true"
                          :clearable="true"
                          :options="fullData"
                          style="line-height: normal;"
                          :disabled="newedit==2?true:false" @select="treeselectHeld"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型:">
              <el-select v-model="form.menuType"
                         :disabled="newedit==2?true:false"
                         placeholder="选择菜单类型"
                         style="width: 100%;"
                         :option="menuTypeArr">
                <template v-for="(item, index) in menuTypeArr">
                  <el-option :label="item.label"
                             :value="item.value"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
                  v-if="form.menuType=='F'">
            <el-form-item label="权限标识:">
              <el-input v-model="form.perms"
                        clearable
                        autocomplete="off"
                        :disabled="newedit==2?true:false"
                        placeholder="请输入权限标识"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType!='F'">
            <el-form-item label="路由地址:"><el-input v-model="form.path"
                        :disabled="newedit==2?true:false"
                        clearable
                        placeholder="/路由地址"></el-input></el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType!='F'">
            <el-form-item label="组件路径:"><el-input v-model="form.component"
                        :disabled="newedit==2?true:false"
                        clearable
                        placeholder="/路径名"></el-input></el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType!='F'">
            <el-form-item label="路由参数:"><el-input v-model="form.query"
                        :disabled="newedit==2?true:false"
                        clearable
                        placeholder=":参数"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单状态:">
              <el-select v-model="form.status"
                         :disabled="newedit==2?true:false"
                         placeholder="选择菜单状态"
                         style="width: 100%;">
                <template v-for="(item, index) in statusArr">
                  <el-option :label="item.label"
                             :value="item.value"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示:">
              <el-select v-model="form.visible"
                         :disabled="newedit==2?true:false"
                         placeholder="选择是否显示"
                         style="width: 100%;">
                <template v-for="(item, index) in visibleArr">
                  <el-option :label="item.label"
                             :value="item.value"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           v-if="newedit!==2">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary"
                   icon="el-icon-finished"
                   @click="submit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { menuList, menuDelete, menuAdd, menuUpdata } from '@/api/index'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      newedit: 0,
      tableData: [],
      fullData: [],
      statusArr: [
        {
          label: '正常',
          value: 0,
        },
        {
          label: '停用',
          value: 1,
        },
      ],
      visibleArr: [
        {
          label: '显示',
          value: 0,
        },
        {
          label: '隐藏',
          value: 1,
        },
      ],
      menuTypeArr: [
        {
          label: '目录',
          value: 'M',
        },
        {
          label: '菜单',
          value: 'C',
        },
        {
          label: '按钮',
          value: 'F',
        },
      ],
      form: {
        menuName: '',
        parentId: null,
        path: '',
        query: '',
        status: 0,
        visible: 0,
        icon: '',
        component: '',
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
    }
  },
  mounted() {
    this.getInit()
  },
  methods: {
    treeselectHeld(e) {
    //   console.log(e, '菜单选择')
    },
    initHeightFun() {
      return window.innerHeight - 120
    },
    getInit() {
      let that = this
      menuList().then((res) => {
        if (res.code == 200) {
          that.tableData = that.recursionFun(res.data.menuList)
        }
      })
    },
    add() {
      let that = this
      that.dialogFormVisible = true
      that.form = {
        menuName: '',
        parentId: null,
        path: '',
        query: '',
        status: 0,
        visible: 0,
        icon: '',
        component: '',
      }
      // that.tableData.map(item => {
      //   if (item.parentId == 0) {
      //     that.fullData.push(item);
      //   }
      // });
    },
    viewHeld(row) {
      console.log(row)
      let that = this
      that.newedit = 2
      if (row.parentId == 0) {
        row.parentId = null
      }
      that.form = row
      that.dialogFormVisible = true
    },
    edit(row) {
      console.log(row)
      let that = this
      that.newedit = 1
      if (row.parentId == 0) {
        row.parentId = null
      }
      that.form = JSON.parse(JSON.stringify(row))
      that.dialogFormVisible = true
      console.log(that.fullData)
    },
    del(row) {
      let that = this
      console.log(row)
      that
        .$confirm('确认删除吗?删除后将无法恢复！', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          menuDelete(row.menuId).then((res) => {
            if (res.code === 200) {
              that.getInit()
              that.$Toast('删除成功')
            } else {
              that.$Toast(res.message)
            }
          })
        })
        .catch(() => {
          that.$Toast('删除取消')
        })
    },
    submit() {
      let that = this
      if (that.form.parentId == '') {
        that.form.parentId = 0
      }
      if (that.form.menuId) {
        menuUpdata(that.form).then((res) => {
          if (res.code == 200) {
            that.getInit()
            that.$Toast('修改成功')
          } else {
            that.$Toast(res.message)
          }
        })
      } else {
        menuAdd(that.form).then((res) => {
          if (res.code == 200) {
            that.getInit()
            that.$Toast('添加成功')
          } else {
            that.$Toast(res.message)
          }
        })
      }
      that.dialogFormVisible = false
      console.log(that.form, that.form.menuId)
    },
    // 处理菜单结构
    recursionFun(dataArray) {
      console.log(dataArray, '初始化')
      let that = this
      let arr = []
      let arrayzjd = []
      dataArray.map((item) => {
        item.label = item.menuName
        item.id = item.menuId
        item.children = []
        if (item.parentId == 0) {
          arr.push(item)
        } else {
          arrayzjd.push(item)
        }
        dataArray.map((v) => {
          if (v.parentId == item.menuId) {
            item.children.push(v)
          }
        })
      })
      let fullArr = JSON.parse(JSON.stringify(arr))
      fullArr.map((item) => {
        item.children.map((v) => {
            delete v.children
        //   if (v.children.length == 0) {
        //     delete v.children
        //   }
        })
      })
      that.fullData = fullArr
      return arr
    },
    // recursionFun(dataArray) {
    //   let that = this;
    //   console.log(dataArray, '初始数据');
    //   let arr = [];
    //   let arrayzjd = [];
    //   dataArray.map(item => {
    //     item.label = item.menuName
    //     item.id = item.menuId
    //     if (item.parentId == 0) {
    //       item.children = [];
    //       arr.push(item);
    //     } else {
    //       arrayzjd.push(item);
    //     }
    //   });
    //   arr.map(item => {
    //     arrayzjd.map(v => {
    //       if (item.menuId == v.parentId) {
    //         item.children.push(v);
    //       }
    //     });
    //   });
    //   console.log(arr,'最终');
    //   that.fullData = arr;
    //   return arr;
    // }
  },
}
</script>

<style lang="scss">
.el-icon-arrow-right:before {
  content: '\e6d9';
}

.el-table__expand-icon--expanded .el-icon-arrow-right:before {
  content: '\e6d8' !important;
}

.el-table__expand-icon--expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-table__expand-icon {
  border: 1px solid #e3e3e3;
  // font-weight: bold !important;
  // font-size: 18px;
  // display: flex;
  // align-items: center;
}
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
